Lodop 在 Vue 中使用

July 24, 2022

1、 web 中如何调用打印设备

最简单的是我们使用 print 函数就可以调用浏览器的打印。不过这样子做对用户的打扰性比较强，不适用于静默打印。
也可以使用 HiPrint，我看了下，觉得不适合小票打印，具体的可以看他的官网http://hiprint.io/
Lodop 我调查后觉得是个不错的选择，文档地址：http://www.lodop.net/

2、Lodop 在 Vue 中的简单使用

1、封装一个用于加载CLodopfuncs.js的模块

/**
 * @param jsSrc  远程打印CLodop.js地址
 * @param programSrc  驱动地址
 * @method getLodop  获取LODOP对象
 * **/
function LodopFuncs(programSrc, jsSrc) {
  this.jsSrc = jsSrc
  this.programSrc = programSrc
  this.CLodopJsState = undefined //加载装填
  this.loadCLodop()
}

//加载C-Lodop
LodopFuncs.prototype.loadCLodop = function () {
  if (this.CLodopJsState == "loading" || this.CLodopJsState == "complete")
    return
  this.CLodopJsState = "loading"
  var head =
    document.head ||
    document.getElementsByTagName("head")[0] ||
    document.documentElement
  var JS1 = document.createElement("script")
  var JS2 = document.createElement("script")
  var JS3 = document.createElement("script")

  //优先调用本地(Localhost)8000端口服务：
  JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=2"

  //如果失败，则调用本地18000端口：
  JS2.src = "http://localhost:18000/CLodopfuncs.js?priority=1"

  //远程打印的核心cldopjs：
  JS3.src = this.jsSrc

  JS1.onload =
    JS2.onload =
    JS3.onload =
      function () {
        this.CLodopJsState = "complete"
      }
  JS1.onerror =
    JS2.onerror =
    JS3.onerror =
      function (evt) {
        this.CLodopJsState = "complete"
      }
  head.insertBefore(JS1, head.firstChild)
  head.insertBefore(JS2, head.firstChild)
  head.insertBefore(JS3, head.firstChild)
}

//获取LODOP对象
LodopFuncs.prototype.getLodop = function (oOBJECT, oEMBED) {
  var LODOP
  try {
    try {
      LODOP = getCLodop() //获得主对象（getCLodop是在CLodopfuncs.js定义的）

      if (!LODOP && this.CLodopJsState !== "complete") {
        if (this.CLodopJsState == "loading") {
          alert("网页还没下载完毕，请稍等一下再操作")

          return
        }
      }
    } catch (err) {
      alert(
        "您还未安装打印控件，点击确定下载打印控件，安装成功后刷新页面即可进行打印"
      )
      window.open(this.programSrc)
    }

    //清理旧例子的object或embed元素(避免乱提示干扰理解)：
    if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED)
    if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT)

    return LODOP
  } catch (err) {
    alert("getLodop出错:" + err)
  }
}

export default LodopFuncs

2、在 main.js 中引用

// main.js
import LodopFuncs from "@/utils/LodopFuncs"
let Lodop = new LodopFuncs("../static/CLodop_Setup_for_Win32NT.exe") //第二个参数是远程打印的clodop.js, 可省略,
Vue.prototype.$lodop = Lodop.getLodop.bind(Lodop) //注意需要绑定实例化对象

3、在方法中调用打印

//获取当前页面所有css字符串
var styleStr = Array.prototype.slice
  .call(document.querySelectorAll("style,link"))
  .reduce((a, i) => {
    a += i.outerHTML
    return a
  }, "")

//获取打印区域的html
var htmlStr = document.getElementById("printctx2").outerHTML

var strHTML = styleStr + htmlStr

var LODOP = this.$lodop()

LODOP.PRINT_INIT("订单XX") //打印初始化

// LODOP.SET_PRINTER_INDEX(0); // 选择打印机, 老版本的CLodop驱动中必须加入, 新版可省略

// LODOP.SET_PRINT_PAGESIZE(0, "25cm", "14cm", ""); //设定纸张大小
LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "100%") //设置缩放

LODOP.ADD_PRINT_HTM("20px", "25%", "50%", "100%", strHTML)

LODOP.PREVIEW() //预览